<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home-Welcome</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/welcome.css">
</head>
<body>
  <div class="infomation container container-wrapping">
    <h3>寻物审核</h3>
    <hr>
    <div class="alert alert-info" role="alert">
                有 <a href="#" class="badge badge-info"><strong class="totalCheckLoseCls">0</strong></a> 条 新的 
        <a href="#" class="badge badge-info"><strong>寻找失物</strong></a> 信息需要审核。
        <a class="btn btn-info btn-sm goToOperateLoseBtn goToOperationBtn" href="../01/issueCheckLose.jsp" role="button">去处理</a>
    </div>
    <br>
    
    <h3>寻主审核</h3>
    <hr>
    <div class="alert alert-info" role="alert">
                有 <a href="#" class="badge badge-info"><strong class="totalCheckLoserCls">0</strong></a> 条 新的 
        <a href="#" class="badge badge-info"><strong>寻找失主</strong></a> 信息需要审核。
        <a class="btn btn-info btn-sm goToOperateLoserBtn goToOperationBtn" href="../02/issueCheckLoser.jsp" role="button">去处理</a>
    </div>
    <br>
    
    <h3>最近公告</h3>
    <hr>
    <div class="table-responsive">
        <!-- 这里又是一个table，显示系统发布的信息，根据时间排序，只显示前面8条信息 -->
        <table class="table table-hover text-center table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">标题</th>
              <th scope="col">发布者</th>
              <th scope="col">发布时间</th>
              <th scope="col">详情</th>
            </tr>
          </thead>
          <tbody>
          <!-- 展示最近发布的8条记录 -->
          </tbody>
        </table>
    </div>
  </div>
  <!-- Modal : showSystemInfoDetail -->
  <div class="modal fade" id="showSystemInfoDetail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">公告</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="" method="post">
            <div class="form-group row">
              <label for="forTitle" class="col-sm-2 col-form-label text-center">标题</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="forTitle" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label for="forInfoDetail" class="col-sm-2 col-form-label text-center">内容</label>
              <div class="col-sm-10">
                <textarea id="forInfoDetail" name="" class="form-control" readonly rows="3"></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function(){
    	showSystemInfo();
    	getTotalSearchToShow();
    });

    // 展示最近发布的8条记录
    function showSystemInfo(){
    	$.post(
    			"${pageContext.request.contextPath }/welcome?method=showSystemInfo",
    		    function(data){
    			      var content = null;
    			      for(var i = 0; i<data.length;i++){
    			        content +=  "<tr>"+
    			                "<th scope='row'>"+(i+1)+"</th>"+
    			                "<td>"+data[i].title+"</td>"+
    			                "<td>"+data[i].username+"</td>"+
    			                "<td>"+data[i].datetime+"</td>"+
    			                "<td><a href='#' class='alert-link' data-toggle='modal' data-target='#showSystemInfoDetail' onclick='showInfoDetail("+data[i].infoid+")'>详情</a></td>"+
    			              +"</tr>";
    			      }
    			      $("tbody").html(content);
    			    },
    			    "json"
    	);
    }
    // 展示记录的详情
    function showInfoDetail(infoid){
    	$.post(
    	  "${pageContext.request.contextPath }/welcome?method=showInfoDetail",
    		{
    		  "infoid":infoid
    		},
    	  function(data){
    		  $("#forTitle").val(data.title);
    		  $("#forInfoDetail").val(data.infoDetail);
    	  },
    	  "json"
    	);
    }
    // 预约 领取失物 记录数
    function getTotalSearchToShow(){
    	$.post(
    	  "${pageContext.request.contextPath }/welcome?method=getTotalSearchToShow",
    	  {},
    	  function(data){
    		  if(data.totalLose!=0){
	    		  $(".totalCheckLoseCls").text(data.totalLose)
    		  }else{
	    		  $(".totalCheckLoseCls").text(data.totalLose)
    			  $(".goToOperateLoseBtn").addClass("disabled");
    		  }
    		  if(data.totalLoser!=0){
    	      $(".totalCheckLoserCls").text(data.totalLoser)
    	    }else{
    	      $(".totalCheckLoserCls").text(data.totalLoser)
    	      $(".goToOperateLoserBtn").addClass("disabled");
    	    }
    	  },
    	  "json"
    	);
    }
  </script>
</body>
</html>
